<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card shadow="never">
        <!-- 面包屑 -->
        <div slot="header" class="clearfix" v-if="query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>大数据</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 搜索表单 -->
        <el-form ref="formRef" :model="formData" :inline="true">
          <el-row>
            <!-- 目录名称输入框 -->
            <el-col :span="6">
              <el-form-item label="目录名称" prop="directoryName">
                <el-input
                  placeholder=""
                  v-model="formData.directoryName"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 状态下拉框 -->
            <el-col :span="6">
              <el-form-item label="状态" prop="state">
                <el-select placeholder="请选择" v-model="formData.state">
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 清除和搜索按钮 -->
            <el-col :span="4">
              <el-form-item>
                <el-button @click="resetForm">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
            <!-- 返回学科和新增目录 -->
            <el-col :span="8">
              <el-row type="flex" justify="end">
                <el-form-item>
                  <el-button type="text" icon="el-icon-back" v-if="query.id" @click="$router.push('/subjects/list')">返回学科</el-button>
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    @click="addVisible = true"
                    >新增目录</el-button
                  >
                </el-form-item>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <!-- 提示 -->
        <el-alert
          :title="alertText"
          type="info"
          show-icon
          :closable="false"
        ></el-alert>
        <!-- 表格 -->
        <el-table
          :data="dataList"
          style="width: 100%"
          border
          highlight-current-row
          fit
          class="table"
        >
        <!-- 序号 -->
          <el-table-column
            type="index"
            width="50"
            align="center"
            label="序号"
          ></el-table-column>
          <!-- 所属学科 -->
          <el-table-column align="center" label="所属学科">
            <template v-slot="{ row }">
              <span>{{ row.subjectName }}</span>
            </template>
          </el-table-column>
          <!-- 目录名称 -->
          <el-table-column align="center" label="目录名称">
            <template v-slot="{ row }">
              <span>{{ row.directoryName }}</span>
            </template>
          </el-table-column>
          <!-- 创建者 -->
          <el-table-column align="center" label="创建者">
            <template v-slot="{ row }">
              <span>{{
                row.creatorID === 2 ? "超级管理员" : "录入管理员"
              }}</span>
            </template>
          </el-table-column>
          <!-- 创建日期 -->
          <el-table-column align="center" label="创建日期">
            <template v-slot="{ row }">
              <span>{{ row.addDate | dateformat("YYYY-MM-DD HH:mm:ss") }}</span>
            </template>
          </el-table-column>
          <!-- 面试题数量 -->
          <el-table-column align="center" label="面试题数量">
            <template v-slot="{ row }">
              <span>{{ row.totals }}</span>
            </template>
          </el-table-column>
          <!-- 状态 -->
          <el-table-column align="center" label="状态">
            <template v-slot="{ row }">
              <span v-if="row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <!-- 禁用与启用按钮 -->
              <el-button type="text">
                <span v-if="row.state === 0" @click="row.state = 1">启用</span>
                <span v-else @click="row.state = 0">禁用</span>
              </el-button>
              <!-- 修改按钮 -->
              <el-button
                type="text"
                :disabled="row.state === 0"
                @click="updatePermission(row.id)"
                >修改</el-button
              >
              <!-- 删除按钮 -->
              <el-button
                type="text"
                :disabled="row.state === 0"
                @click="delPermission(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(page.page)"
            :total="Number(counts)"
            :page-size="Number(page.pagesize)"
            :page-sizes="[2, 6, 8, 10]"
            layout="prev, pager, next, sizes, jumper"
          ></el-pagination>
        </el-row>
      </el-card>
      <!-- 新增目录弹层 -->
      <el-dialog
        title="新增目录"
        :visible.sync="addVisible"
        width="30%"
        @close="addClose"
      >
      <!-- 表单 -->
        <el-form :model="addForm" :rules="rules" ref="addRef">
          <!-- 所属学科下拉选择框 -->
          <el-form-item label="所属学科" label-width="80px" prop="subjectID" v-if="!query.id">
            <el-select
              v-model="addForm.subjectID"
              placeholder="请选择"
              style="width:100%;"
            >
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 目录名称输入框 -->
          <el-form-item
            label="目录名称"
            label-width="80px"
            prop="directoryName"
          >
            <el-input
              v-model="addForm.directoryName"
              autocomplete="off"
              placeholder="请输入目录名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 按钮区域 -->
        <el-row type="flex" justify="center">
          <el-button @click="addCancel()">取消</el-button>
          <el-button type="primary" @click="addClick()">确定</el-button>
        </el-row>
      </el-dialog>
      <!-- 修改目录弹层 -->
      <el-dialog
        title="修改目录"
        :visible.sync="updateVisible"
        width="30%"
        @close="updateClose"
      >
      <!-- 表单 -->
        <el-form :model="updateForm" ref="updateRef" :rules="rules">
      <!-- 所属学科下拉选择框 -->
          <el-form-item label="所属学科" label-width="80px" v-if="!query.id">
            <el-select v-model="updateForm.subjectID" style="width:100%;">
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 目录名称输入框 -->
          <el-form-item label="目录名称" label-width="80px" prop="directoryName">
            <el-input
              v-model="updateForm.directoryName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 按钮区域 -->
        <el-row type="flex" justify="center">
          <el-button @click="updateCancel()">取消</el-button>
          <el-button type="primary" @click="updateClick()">确定</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入状态选择下拉框需要的静态数据
import { status } from '@/api/hmmm/constants'
// 引入目录管理相关的接口
import { list, simple, add, remove, update } from '@/api/hmmm/directorys.js'
// 引入学科简单列表的接口
import { simple as subjectsList } from '@/api/hmmm/subjects.js'
export default {
  name: 'DirectorysList',
  props: {},
  components: {},
  data () {
    return {
      // 页信息
      page: {
        page: 1,
        pagesize: 10
      },
      counts: null, // 目录总条数
      dataList: [], // 目录列表数据
      simpleList: [], // 目录简单列表数据
      subjectList: [], // 学科列表数据
      alertText: '', // 提示总条数
      // 表单数据
      formData: {
        directoryName: '', // 目录名称
        state: null // 状态
      },
      // 新增表单数据
      addForm: {
        subjectID: '', // 学科ID
        directoryName: '' // 目录名称
      },
      // 修改表单数据
      updateForm: {
        id: '',
        subjectID: '', // 学科ID
        directoryName: '' // 目录名称
      },
      addVisible: false, // 新增目录弹层是否弹出
      updateVisible: false, // 修改目录弹层是否弹出
      // 验证规则
      rules: {
        subjectID: [
          { required: true, message: '学科不能为空', trigger: 'change' }
        ],
        directoryName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      },
      // 地址栏参数
      query: {
        id: null, // 学科ID
        name: '' // 学科名称
      }
    }
  },
  created () {
    // 获取地址栏参数
    this.getQuery()
    // 获取目录列表
    this.getList()
    // 获取目录简单列表
    this.getSimpleList()
    // 获取学科简单列表
    this.subjectsList()
  },
  watch: {
    // 相同路由跳转，刷新这个路由
    $route () {
      if (!this.$route.query.id) {
        this.query.id = ''
        this.query.name = ''
        this.getList()
      }
    }
  },
  computed: {
    // 存储状态数据
    status () {
      return status
    }
  },
  methods: {
    // 获取地址栏参数
    getQuery () {
      this.query.id = this.$route.query.id
      this.query.name = this.$route.query.name
    },
    // 获取目录列表数据
    async getList (data) {
      const { data: res } = this.query.id ? (data ? await list({ subjectID: this.query.id, ...data }) : await list({ subjectID: this.query.id })) : await list(data)
      // 获取目录总条数
      this.counts = res.counts
      // 获取当前页
      this.page.page = res.page
      // 获取页容量
      this.page.pagesize = res.pagesize
      // 获取目录列表数据
      this.dataList = res.items
      // 提示总条数
      this.alertText = `数据一共${this.counts}条`
    },
    // 获取简单列表数据
    async getSimpleList () {
      const { data: res } = await simple()
      this.simpleList = res
    },
    // 清除按钮
    resetForm () {
      this.$refs.formRef.resetFields()
    },
    // 搜索按钮
    search () {
      this.page.page = 1
      this.getList(this.formData)
    },
    // 每页显示目录条数
    handleSizeChange (val) {
      this.page.pagesize = val
      this.page.page = 1
      this.getList(this.page)
    },
    // 跳转某一页
    handleCurrentChange (val) {
      this.page.page = val
      this.getList(this.page)
    },
    // 新增目录确定按钮
    addClick () {
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          this.query.id && (this.addForm.subjectID = parseInt(this.query.id))
          await add(this.addForm)
          this.addVisible = false
          this.getList()
          this.addClose()
          this.$message({
            message: '新增成功',
            type: 'success',
            showClose: true,
            duration: 3000
          })
        } else {
          console.log('err')
          return false
        }
      })
    },
    // 修改目录确定按钮
    updateClick () {
      this.$refs.updateRef.validate(async (valid) => {
        if (valid) {
          await update(this.updateForm)
          this.updateVisible = false
          this.getList()
          this.$message({
            message: '修改成功',
            type: 'success',
            showClose: true,
            duration: 3000
          })
        } else {
          console.log('err')
          return false
        }
      })
    },
    // 新增目录取消按钮
    addCancel () {
      this.addVisible = false
      this.addClose()
    },
    // 修改目录取消按钮
    updateCancel () {
      this.updateVisible = false
      this.updateClose()
    },
    // 关闭新增对话框清空表单和验证
    addClose () {
      this.addForm.subjectID = ''
      this.addForm.directoryName = ''
      this.$refs.addRef.resetFields()
    },
    // 关闭修改对话框清空验证
    updateClose () {
      this.$refs.updateRef.resetFields()
    },
    // 删除按钮
    delPermission (data) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async action => {
          // 删除请求
          await remove(data)
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
            duration: 3000
          })
          // 刷新列表
          this.getList()
        })
        .catch(() => {})
    },
    // 修改按钮
    updatePermission (id) {
      const data = this.dataList.find(item => item.id === id)
      this.updateForm.id = id
      this.updateForm.subjectID = data.subjectID
      this.updateForm.directoryName = data.directoryName
      this.updateVisible = true
    },
    // 获取学科列表
    async subjectsList () {
      const { data } = await subjectsList()
      this.subjectList = data
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  margin: 20px 0;
}
</style>
